<template>
	<view class="login-container">
		<!-- 背景装饰 -->
		<view class="background-decor">
			<view class="decor-circle circle-1"></view>
			<view class="decor-circle circle-2"></view>
			<view class="decor-circle circle-3"></view>
		</view>

		<!-- 登录卡片 -->
		<view class="login-card">
			<!-- Logo和标题 -->
			<view class="header-section">
				<view class="logo-container">
					<view class="logo">转</view>
				</view>
				<view class="title">欢迎登录转转</view>
				<view class="subtitle">专业的闲置二手交易平台</view>
			</view>

			<!-- 平台适配登录方式 -->
			<view class="platform-login-section">
				<!-- 公众号环境 -->
				<view v-if="platform === 'wechat-official'" class="platform-login">
					<view class="platform-header">
						<view class="platform-icon wechat">
							<text class="iconfont icon-weixin"></text>
						</view>
						<view class="platform-title">微信公众号登录</view>
						<view class="platform-desc">点击下方按钮快速登录</view>
					</view>

					<button class="login-btn wechat-btn" @tap="handleWechatOfficialLogin">
						<text class="iconfont icon-weixin"></text>
						微信公众号登录
					</button>

					<view class="switch-login">
						<text @tap="showOtherLogin">使用其他方式登录</text>
					</view>
				</view>

				<!-- 小程序环境 -->
				<view v-else-if="platform === 'wechat-mini'" class="platform-login">
					<view class="platform-header">
						<view class="platform-icon wechat">
							<text class="iconfont icon-weixin"></text>
						</view>
						<view class="platform-title">微信小程序登录</view>
						<view class="platform-desc">点击下方按钮快速登录</view>
					</view>

					<button class="login-btn wechat-btn" @tap="handleWechatMiniLogin">
						<text class="iconfont icon-weixin"></text>
						微信小程序登录
					</button>

					<view class="switch-login">
						<text @tap="showOtherLogin">使用其他方式登录</text>
					</view>
				</view>

				<!-- 其他平台环境 -->
				<view v-else class="normal-login">
					<!-- 登录方式切换 -->
					<view class="tab-section">
						<view class="tab-item" :class="{ active: activeTab === 'phone' }" @tap="switchTab('phone')">
							手机登录
						</view>
						<view class="tab-item" :class="{ active: activeTab === 'account' }" @tap="switchTab('account')">
							账号登录
						</view>
					</view>

					<!-- 手机号登录表单 -->
					<view class="form-section" v-if="activeTab === 'phone'">
						<view class="input-group">
							<view class="input-item">
								<input placeholder="请输入手机号" v-model="phone" type="number" maxlength="11" />
							</view>
							<view class="input-item code-input">
								<input placeholder="请输入验证码" v-model="smsCode" type="number" maxlength="6" />
								<button class="code-btn" :class="{ disabled: countdown > 0 }" @tap="getSMSCode">
									{{ countdown > 0 ? countdown + 's' : '获取验证码' }}
								</button>
							</view>
						</view>

						<button class="login-btn primary-btn" @tap="handlePhoneLogin">
							登录
						</button>
					</view>

					<!-- 账号登录表单 -->
					<view class="form-section" v-if="activeTab === 'account'">
						<view class="input-group">
							<view class="input-item">
								<input placeholder="请输入用户名/手机号/邮箱" v-model="username" />
							</view>
							<view class="input-item">
								<input placeholder="请输入密码" v-model="password" :password="true" />
							</view>
						</view>

						<button class="login-btn primary-btn" @tap="handleAccountLogin">
							登录
						</button>

						<view class="forgot-password">
							<text @tap="handleForgotPassword">忘记密码？</text>
						</view>
					</view>
				</view>

				<!-- 协议勾选 -->
				<view class="agreement-section">
					<view class="agreement-checkbox" @tap="toggleAgreement">
						<view class="checkbox" :class="{ checked: agreementChecked }">
							<text v-if="agreementChecked" class="iconfont icon-check"></text>
						</view>
						<text class="agreement-text">
							我已阅读并同意
							<text class="link" @tap.stop="showAgreement">《用户协议》</text>
							和
							<text class="link" @tap.stop="showPrivacy">《隐私政策》</text>
						</text>
					</view>
				</view>

				<!-- 第三方登录 -->
				<view class="third-party-section" v-if="platform !== 'wechat-official' && platform !== 'wechat-mini'">
					<view class="divider">
						<view class="divider-line"></view>
						<text class="divider-text">其他登录方式</text>
						<view class="divider-line"></view>
					</view>

					<view class="third-party-buttons">
						<button class="third-party-btn wechat-btn" @tap="handleWechatMiniLogin">
							<text class="iconfont icon-weixin"></text>
							小程序
						</button>
						<button class="third-party-btn wechat-btn" @tap="handleWechatOfficialLogin">
							<text class="iconfont icon-weixin"></text>
							公众号
						</button>
					</view>
				</view>

				<!-- 底部信息 -->
				<view class="footer-section">
					<text>腾讯投资 · 更专业的闲置二手交易平台</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { login } from '@/api/auth.js';

export default {
	data() {
		return {
			platform: 'normal', // wechat-official, wechat-mini, normal
			activeTab: 'phone', // phone, account
			phone: '',
			smsCode: '',
			username: '',
			password: '',
			agreementChecked: false,
			countdown: 0
		}
	},
	onLoad() {
		this.detectPlatform();
	},
	methods: {
		// 检测平台环境
		detectPlatform() {
			// 检测微信公众号环境
			if (typeof window !== 'undefined' && window.navigator && window.navigator.userAgent) {
				const ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) === 'micromessenger') {
					// 在微信环境中
					if (window.__wxjs_environment === 'miniprogram') {
						this.platform = 'wechat-mini';
					} else {
						this.platform = 'wechat-official';
					}
				} else {
					this.platform = 'normal';
				}
			} else {
				// 在uni-app环境中，使用uni.getSystemInfo检测
				uni.getSystemInfo({
					success: (res) => {
						if (res.platform === 'devtools') {
							// 开发工具中，模拟不同平台
							this.platform = 'normal';
						} else if (res.platform === 'mp-weixin') {
							// 微信小程序环境
							this.platform = 'wechat-mini';
						} else {
							// 其他环境
							this.platform = 'normal';
						}
					}
				});
			}
		},

		// 切换登录方式
		switchTab(tab) {
			this.activeTab = tab;
		},

		// 切换协议勾选状态
		toggleAgreement() {
			this.agreementChecked = !this.agreementChecked;
		},

		// 显示其他登录方式
		showOtherLogin() {
			this.platform = 'normal';
		},

		// 获取验证码
		getSMSCode() {
			if (!this.phone) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			}

			const phoneRegex = /^1[3-9]\d{9}$/;
			if (!phoneRegex.test(this.phone)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				});
				return;
			}

			this.countdown = 60;
			const timer = setInterval(() => {
				this.countdown--;
				if (this.countdown <= 0) {
					clearInterval(timer);
				}
			}, 1000);

			uni.showToast({
				title: '验证码已发送',
				icon: 'success'
			});
		},

		// 手机号登录
		async handlePhoneLogin() {
			if (!this.validateForm()) return;

			await this.handleLogin('phone', {
				phone: this.phone,
				smsCode: this.smsCode
			});
		},

		// 账号登录
		async handleAccountLogin() {
			if (!this.validateForm()) return;

			await this.handleLogin('account', {
				username: this.username,
				password: this.password
			});
		},

		// 微信小程序登录
		async handleWechatMiniLogin() {
			if (!this.agreementChecked) {
				uni.showToast({
					title: '请先同意用户协议',
					icon: 'none'
				});
				return;
			}

			const code = 'wx_mini_code_' + Date.now();
			await this.handleLogin('wechat-mini', { code });
		},

		// 微信公众号登录
		async handleWechatOfficialLogin() {
			uni.navigateTo({
				url: '/pages/my/wechat-official-login'
			});
		},

		// 统一登录处理
		async handleLogin(type, params) {
			try {
				uni.showLoading({
					title: '登录中...'
				});

				const result = await login(type, params);

				if (result.success) {
					uni.hideLoading();

					let successMessage = '登录成功';
					switch (type) {
						case 'phone':
							successMessage = '手机登录成功';
							break;
						case 'account':
							successMessage = '账号登录成功';
							break;
						case 'wechat-mini':
							successMessage = '微信小程序登录成功';
							break;
						case 'wechat-official':
							successMessage = '公众号登录成功';
							break;
					}

					uni.showToast({
						title: successMessage,
						icon: 'success'
					});

					setTimeout(() => {
						uni.switchTab({
							url: '/pages/app/index'
						});
					}, 1500);
				} else {
					uni.hideLoading();
					uni.showToast({
						title: result.error || '登录失败',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.hideLoading();
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
			}
		},

		// 表单验证
		validateForm() {
			if (!this.agreementChecked) {
				uni.showToast({
					title: '请先同意用户协议',
					icon: 'none'
				});
				return false;
			}

			if (this.activeTab === 'phone') {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return false;
				}

				if (!this.smsCode) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return false;
				}
			} else {
				if (!this.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return false;
				}

				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return false;
				}
			}

			return true;
		},

		// 忘记密码
		handleForgotPassword() {
			uni.showToast({
				title: '忘记密码功能开发中',
				icon: 'none'
			});
		},

		// 显示用户协议
		showAgreement() {
			uni.showToast({
				title: '用户协议',
				icon: 'none'
			});
		},

		// 显示隐私政策
		showPrivacy() {
			uni.showToast({
				title: '隐私政策',
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.login-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.background-decor {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 0;
}

.decor-circle {
	position: absolute;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(192, 57, 43, 0.05) 100%);
	
	&.circle-1 {
		width: 400rpx;
		height: 400rpx;
		top: -200rpx;
		right: -200rpx;
	}
	
	&.circle-2 {
		width: 300rpx;
		height: 300rpx;
		bottom: -150rpx;
		left: -150rpx;
	}
	
	&.circle-3 {
		width: 200rpx;
		height: 200rpx;
		top: 50%;
		left: 10%;
	}
}

.login-card {
	width: 100%;
	max-width: 600rpx;
	position: relative;
	z-index: 1;
}

.header-section {
	text-align: center;
	margin-bottom: 60rpx;
}

.logo-container {
	
}

.logo {
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
	border-radius: 24rpx;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 48rpx;
	font-weight: bold;
	box-shadow: 0 10rpx 30rpx rgba(231, 76, 60, 0.3);
}

.title {
	font-size: 48rpx;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 16rpx;
}

.subtitle {
	font-size: 28rpx;
	color: #7f8c8d;
}

.platform-header {
	text-align: center;
	margin-bottom: 60rpx;
}

.platform-icon {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30rpx;
	
	&.wechat {
		background: linear-gradient(135deg, #1aad19 0%, #129611 100%);
		color: #ffffff;
	}
	
	.iconfont {
		font-size: 60rpx;
	}
}

.platform-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 16rpx;
}

.platform-desc {
	font-size: 28rpx;
	color: #7f8c8d;
}

.login-btn {
	width: 100%;
	height: 88rpx;
	border: none;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30rpx;
	transition: all 0.3s ease;
	
	&.primary-btn {
		background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
		color: #ffffff;
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 20rpx rgba(231, 76, 60, 0.4);
		}
	}
	
	&.wechat-btn {
		background: linear-gradient(135deg, #1aad19 0%, #129611 100%);
		color: #ffffff;
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 20rpx rgba(26, 173, 25, 0.4);
		}
	}
	
	.iconfont {
		margin-right: 16rpx;
		font-size: 36rpx;
	}
}

.switch-login {
	text-align: center;
	
	text {
		color: #3498db;
		font-size: 28rpx;
		
		&:active {
			color: #2980b9;
		}
	}
}

.tab-section {
	display: flex;
	background: #f8f9fa;
	border-radius: 44rpx;
	padding: 8rpx;
	margin-bottom: 40rpx;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 20rpx;
	border-radius: 36rpx;
	font-size: 32rpx;
	color: #7f8c8d;
	transition: all 0.3s ease;
	
	&.active {
		background: #ffffff;
		color: #e74c3c;
		font-weight: 500;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
}

.input-group {
	margin-bottom: 40rpx;
}

.input-item {
	position: relative;
	margin-bottom: 30rpx;
	
	input {
		width: 100%;
		height: 88rpx;
		background: #f8f9fa;
		border: 2rpx solid transparent;
		border-radius: 44rpx;
		padding: 0 32rpx;
		font-size: 32rpx;
		color: #2c3e50;
		transition: all 0.3s ease;
		
		&:focus {
			background: #ffffff;
			border-color: #e74c3c;
			box-shadow: 0 4rpx 20rpx rgba(231, 76, 60, 0.1);
		}
		
		&::placeholder {
			color: #bdc3c7;
		}
	}
	
	&.code-input {
		display: flex;
		align-items: center;
		
		input {
			flex: 1;
			margin-right: 20rpx;
		}
	}
}

.code-btn {
	height: 88rpx;
	line-height: 88rpx;
	background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
	color: #ffffff;
	border: none;
	border-radius: 44rpx;
	font-size: 28rpx;
	font-weight: 500;
	transition: all 0.3s ease;
	
	&.disabled {
		background: #bdc3c7;
		color: #7f8c8d;
	}
	
	&:active:not(.disabled) {
		transform: translateY(2rpx);
	}
}

.forgot-password {
	text-align: right;
	margin-top: 20rpx;
	
	text {
		color: #3498db;
		font-size: 28rpx;
		
		&:active {
			color: #2980b9;
		}
	}
}

.agreement-section {
	margin: 40rpx 0;
}

.agreement-checkbox {
	display: flex;
	align-items: center;
	justify-content: center;
}

.checkbox {
	width: 40rpx;
	height: 40rpx;
	border: 2rpx solid #bdc3c7;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16rpx;
	transition: all 0.3s ease;
	
	&.checked {
		background: #e74c3c;
		border-color: #e74c3c;
		
		.iconfont {
			color: #ffffff;
			font-size: 24rpx;
		}
	}
}

.agreement-text {
	font-size: 24rpx;
	color: #7f8c8d;
	
	.link {
		color: #3498db;
		
		&:active {
			color: #2980b9;
		}
	}
}

.third-party-section {
	margin-top: 60rpx;
}

.divider {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.divider-line {
	flex: 1;
	height: 2rpx;
	background: #ecf0f1;
}

.divider-text {
	padding: 0 32rpx;
	font-size: 28rpx;
	color: #7f8c8d;
}

.third-party-buttons {
	display: flex;
	justify-content: center;
	gap: 40rpx;
}

.third-party-btn {
	width: 120rpx;
	height: 120rpx;
	border: none;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #ffffff;
	transition: all 0.3s ease;
	
	&.wechat-btn {
		background: linear-gradient(135deg, #1aad19 0%, #129611 100%);
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 20rpx rgba(26, 173, 25, 0.4);
		}
	}
	
	.iconfont {
		font-size: 48rpx;
		margin-bottom: 8rpx;
	}
}

.footer-section {
	text-align: center;
	margin-top: 60rpx;
	
	text {
		font-size: 24rpx;
		color: #bdc3c7;
	}
}

</style>